<template>
    <div class="w-full box-border p-16px">
        <el-card>
            <filterComponent v-model:filter-data="filterData" @doSearch="getdata" />
            <tableComponent class="set-height" theme="dark" :table-header="tableHeader" :table-data="data"
                v-model:page-info="pageInfo" @pageChange="handlePageChange" @sort-change="sortMethod">
                <template #insurCompanyType>
                    <el-table-column label="保司类型">
                        <template #default="scope">
                            <div v-if="scope.row.insurCompanyType == 3">团意险</div>
                            <div v-if="scope.row.insurCompanyType === 1">日结</div>
                            <div v-if="scope.row.insurCompanyType === 2">长期</div>
                        </template></el-table-column>
                </template>
            </tableComponent>
        </el-card>
        <el-dialog v-model="dialogTableVisible" width="400" title="选择导出月份">
            <el-date-picker v-model="date" type="month" format="YYYY/MM" value-format="YYYY-MM"
                placeholder="请选择" />
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="onExport">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import baseurl from '../../api/env'
import { getqueryinsurcompanyclaimsratioapi, exportinsurcompanyclaimsratioapi } from '../../api/tools/claimSettlementBoard'
import { ElMessage } from 'element-plus'
onMounted(() => {
    getdata()
})
const onExport = () => {
    if (!date.value) {
        ElMessage({
            message: '请选择导出月份',
            type: 'warning'
        })
        return
    }
    exportinsurcompanyclaimsratioapi({ queryMonth: date.value }).then((res) => {
        console.log(res, 'surhygy')
        window.location.href =
            baseurl + '/common/download?delete=true&fileName=' + res
    })
    dialogTableVisible.value = false
}
const sortMethod = (val) => {
    if (val.order) {
        const map = {
            ascending: '1',
            descending: '2'
        }
        sortOrder.value = map[val.order]
    } else {
        sortOrder.value = null
    }
    getdata()
}
const sortOrder = ref('')
const dialogTableVisible = ref(false)
const date = ref('')
const data = ref([])
const tableHeader = ref([
    {
        label: '保司名称',
        prop: 'insurCompanyName'
    },
    {
        label: '保险类型',
        prop: 'insurCompanyType',
    },
    {
        label: '成本保费',
        prop: 'totalCost',
        prefix: '￥'
    },
    {
        label: '理赔金额',
        prop: 'totalFinalAmount',
        prefix: '￥'
    },
    {
        label: '实际理赔率',
        prop: 'claimsRatio',
        subfix: '%',
        sortable: true
    },
])
const pageInfo = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})
const filterData = ref({
    list: {
        serveCompanyName: {
            name: '保司名称',
            prop: 'serveCompanyName',
            value: '',
            placeholder: '搜索保司名称',
            type: 'input',
            inputType: 'text'
        },
    },
    buttonList: [
        {
            icon: 'Upload',
            name: '按月导出',
            click: () => {
                dialogTableVisible.value = true
            }
        }
    ]
})
const handlePageChange = () => {
    getdata()
}
const getdata = async () => {
    const res = await getqueryinsurcompanyclaimsratioapi({ name: filterData.value.list.serveCompanyName.value, pageNum: pageInfo.value.pageNum, pageSize: pageInfo.value.pageSize, claimsRatioOrder: sortOrder.value })
    console.log(res, '保司理赔率')
    data.value = res.list
    pageInfo.value.total = res.total
}
</script>
<style lang="scss" scoped>
.container {
    padding: 0 15px;
    position: relative;
    z-index: 120;
}

.demo-tabs {
    background: #fff;
}

:deep(.el-tabs__nav-scroll) {
    padding-left: 16px;
}
</style>